<script lang="tsx">
import { computed, defineComponent, ref, unref, watch, nextTick } from 'vue';
import { Table } from 'ant-design-vue';
import { BasicDrawer, BasicTable, TableImg } from '#/components';
import { useDrawerInner, useTable } from '#/hooks';
import type { BasicColumn } from '#/types';
import { isEmpty } from '@/utils/is';

const basicMap = new Map([
	['number', '编号'],
	['status', '状态'],
	['creator', '创建者'],
	['approveBranch', '创建者角色'],
	['jlEpcNames', 'epc负责人'],
	['jlReason', '监理事由'],
	['jlContent', '监理内容'],
	['creatorDate', '创建日期'],
	['reformDate', '整改期限'],
	['reformFinish', '销项日期'],
	['typeBig', '大类'],
	['imgList', '图片'],
	['moudleStrList', '位号'],
	['accessoryUrl', '附件'],
	['epcAccessoryUrl', 'epc上传整改单'],
]);

const bigReformFlowMap = new Map([
	['number', '编号'],
	['typeBig', '大类'],
	['typeSmall', '小类'],
	['creator', '创建者'],
	['approveBranch', '创建者角色'],
	['creatorDate', '创建日期'],
	['inspectUnit', '受检单位'],
	['inspectPart', '受检部位'],
	['inspectPurpose', '检查目的及内容'],
	['inspectResult', '检查结果'],
	['reformOpinion', '整改意见'],
	['unitePersonNames', '联合发起人'],
	['approverStatus', '整改类型'],
	['supervisorName', '监理负责人'],
	['jlEpcNames', 'epc负责人'],
	['csrNames', '抄送人'],
	['jlNumber', '监理接收编号'],
	['jlReason', '监理事由'],
	['jlContent', '监理内容'],
	['status', '状态'],
	['reformDate', '整改期限'],
	['reformFinish', '销项日期'],
	['imgList', '图片'],
	['moudleStrList', '位号'],
	['accessoryUrl', '附件'],
	['epcAccessoryUrl', 'epc上传整改单'],
	['jlNotices', '监理通知单'],
	['jlNoticeReply', '监理通知回复单'],
]);

const bigNoticeFlowMap = new Map([
	['number', '编号'],
	['typeBig', '大类'],
	['typeSmall', '小类'],
	['creator', '创建者'],
	['approveBranch', '创建者角色'],
	['creatorDate', '创建日期'],
	['inspectDate', '检查日期'],
	['inspectUnit', '受检单位'],
	['inspectResult', '检查结果'],
	['approverStatus', '整改类型'],
	['csrNames', '抄送人'],
	['status', '状态'],
	['reformDate', '整改期限'],
	['reformFinish', '销项日期'],
	['imgList', '图片'],
	['moudleStrList', '位号'],
	['accessoryUrl', '通知书附件'],
	['replyAccessoryUrl', '整改回复附件'],
]);

const smallFlowMap = new Map([
	['jlNumber', '编号'],
	['typeBig', '大类'],
	['typeSmall', '小类'],
	['status', '状态'],
	['creator', '创建者'],
	['approveBranch', '创建者角色'],
	['creatorDate', '创建日期'],
	['jlEpcNames', 'epc负责人'],
	['jlCsrNames', '抄送人'],
	['jlReason', '监理事由'],
	['jlContent', '监理内容'],
	['reformDate', '整改期限'],
	['reformFinish', '销项日期'],
	['imgList', '图片'],
	['moudleStrList', '位号'],
	['accessoryUrl', '附件'],
	['epcAccessoryUrl', 'epc上传整改单'],
	['jlNotices', '监理通知单'],
	['jlNoticeReply', '监理通知回复单'],
]);

export default defineComponent({
	name: 'UseTableDetailDrawer',
	components: { BasicDrawer, Table, TableImg },
	setup(_, { attrs }) {
		const flowStage = ref(0);
		const status = ref(1);
		const tableData = ref<Recordable>([]);

		const [registerDrawer] = useDrawerInner(async data => {
			tableData.value = data.record;
		});

		const dataSource = computed(() => {
			if (tableData.value) {
				let data = unref(tableData);
				let statusArr = data.workflowTaskStatus ? [...data.workflowTaskStatus] : [0];
				flowStage.value = statusArr[statusArr.length - 1];
				status.value = data.status;
				let rs: Recordable[] = [];
				const extraKeys = ['jlNotices', 'jlNoticeReply'];
				let maps = basicMap;
				if (data.approveBranch == 1) {
					if (data.approverStatus == 0) {
						maps = bigNoticeFlowMap;
					}
					if (data.approverStatus == 1) {
						maps = bigReformFlowMap;
					}
				}
				if (data.approveBranch == 2) {
					maps = smallFlowMap;
				}
				// eslint-disable-next-line no-unused-vars
				for (let key of maps.keys()) {
					if (key in data || extraKeys.includes(key)) {
						let el = data[key] ?? '';
						rs.push({ key: key, title: maps.get(key), value: el });
					}
				}
				return rs;
			}
			return [];
		});

		watch(
			() => tableData.value,
			data => {
				!isEmpty(data) &&
					nextTick(() => {
						setDataSource(unref(dataSource));
					});
			},
			{
				immediate: true,
			},
		);

		const columns: BasicColumn[] = [
			{
				title: 'title',
				dataIndex: 'title',
				width: 150,
			},
			{
				title: 'value',
				dataIndex: 'value',
				customRender: ({ text, record }) => {
					let records = record as Recordable;
					// 问题类型
					if (records.key == 'approverStatus') {
						return (
							<div class="flex justify-between">
								<span>{['通知单', '整改单'][text]}</span>
								{flowStage.value >= 3 || status.value >= 2 ? (
									<a-button
										type="primary"
										size="small"
										onclick={() => {
											downloadExcel('usertask3');
										}}
									>
										下载
									</a-button>
								) : (
									''
								)}
							</div>
						);
					}
					// 创建者角色
					if (records.key == 'approveBranch') {
						return ['业主-安健环', '监理'][text - 1];
					}
					if (records.key == 'status') {
						return ['待接收', '处理中', '待销项', '已销项'][text - 1];
					}
					if (
						records.key == 'accessoryUrl' ||
						records.key == 'epcAccessoryUrl' ||
						records.key == 'replyAccessoryUrl'
					) {
						return text ? (
							<div class="flex justify-between">
								<a-button
									type="primary"
									size="small"
									style="marginRight: 10px"
									onclick={() => {
										previewFile(records.key);
									}}
								>
									预览
								</a-button>
								<a href={text} target="_blank">
									下载
								</a>
							</div>
						) : (
							''
						);
					}
					if (
						records.key == 'inspectPurpose' ||
						records.key == 'jlContent' ||
						records.key == 'inspectPurpose' ||
						records.key == 'inspectResult' ||
						records.key == 'reformOpinion'
					) {
						if (text) {
							text = text.replace(/\n/g, '<br/>');
						}
						return text ? <span v-html={text}></span> : '';
					}
					if (records.key == 'imgList') {
						return (
							<TableImg
								class="inline-flex"
								imgList={text.map((T: Recordable) => T.url)}
								size={100}
							></TableImg>
						);
					}
					if (records.key == 'jlNotices') {
						return flowStage.value >= 4 || status.value >= 2 ? (
							<a-button
								type="primary"
								size="small"
								onclick={() => {
									downloadExcel('usertask4');
								}}
							>
								下载
							</a-button>
						) : (
							''
						);
					}
					if (records.key == 'jlNoticeReply') {
						return flowStage.value >= 5 || status.value >= 3 ? (
							<a-button
								type="primary"
								size="small"
								onclick={() => {
									downloadExcel('usertask5');
								}}
							>
								下载
							</a-button>
						) : (
							''
						);
					}
					return text;
				},
			},
		];

		const [registerTable, { setDataSource }] = useTable({
			columns,
			showHeader: false,
			pagination: false,
			canResize: false,
		});

		function downloadExcel(flow) {
			console.log({ securityId: tableData.value.id, workflowTaskStatus: flow });
		}
		function previewFile(key) {
			console.log(tableData.value[key]);
		}

		return () => {
			return (
				<BasicDrawer {...attrs} title="详情" width="450px" show-footer={false} onRegister={registerDrawer}>
					<BasicTable onRegister={registerTable}></BasicTable>
				</BasicDrawer>
			);
		};
	},
});
</script>
